<template>
  <div ref="chart1" :style="{ width: '100%', height: '100%' }"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, getCurrentInstance } from 'vue'
import { reqMarketAPI } from '@/api/visual/index'

const chart1 = ref()
const { proxy } = getCurrentInstance() as any

let rawData = ref([])
const init = async () => {
  let res = await reqMarketAPI()
  rawData.value = res.result.s
}

onMounted(() => {
  init().then(() => {
    var data0 = splitData(rawData.value)

    function splitData(rawData) {
      var categoryData = []
      var values = []
      for (var i = 0; i < rawData.length; i++) {
        categoryData.push(rawData[i].splice(0, 1)[0])
        values.push(rawData[i])
      }
      return {
        categoryData: categoryData,
        values: values,
      }
    }

    function calculateMA(dayCount) {
      var result = []
      for (var i = 0, len = data0.values.length; i < len; i++) {
        if (i < dayCount) {
          result.push('-')
          continue
        }
        var sum = 0
        for (var j = 0; j < dayCount; j++) {
          sum += data0.values[i - j][1]
        }
        result.push(sum / dayCount)
      }
      return result
    }
    //     获取挂载的组件实例
    const echarts = proxy.$ECharts
    //初始化挂载
    const echarts1 = echarts.init(chart1.value)
    //添加配置
    echarts1.setOption({
      backgroundColor: '#08263a',
      title: {
        text: '深物业A-上证指数',
        left: 0,
        textStyle: {
          color: '#fff',
          fontSize: 15,
        },
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
        },
      },
      legend: {
        textStyle: {
          color: '#fff',
        },
        data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30'],
      },
      grid: {
        left: '10%',
        right: '10%',
        bottom: '15%',
      },
      xAxis: {
        type: 'category',
        data: data0.categoryData,
        scale: true,
        boundaryGap: false,
        axisLine: {
          onZero: false,
        },
        splitLine: {
          show: false,
        },
        splitNumber: 20,
        min: 'dataMin',
        max: 'dataMax',
      },
      yAxis: {
        scale: true,
        splitArea: {
          show: true,
        },
      },
      dataZoom: [
        {
          type: 'inside',
          start: 50,
          end: 100,
        },
        {
          show: true,
          type: 'slider',
          y: '90%',
          start: 50,
          end: 100,
        },
      ],
      series: [
        {
          name: '日K',
          type: 'candlestick',
          data: data0.values,
          markPoint: {
            label: {
              normal: {
                formatter: function (param) {
                  return param != null ? Math.round(param.value) : ''
                },
              },
            },
            data: [
              {
                name: 'XX标点',
                coord: ['2013/5/31', 2300],
                value: 2300,
                itemStyle: {
                  normal: {
                    color: 'rgb(41,60,85)',
                  },
                },
              },
              {
                name: 'highest value',
                type: 'max',
                valueDim: 'highest',
              },
              {
                name: 'lowest value',
                type: 'min',
                valueDim: 'lowest',
              },
              {
                name: 'average value on close',
                type: 'average',
                valueDim: 'close',
              },
            ],
            tooltip: {
              formatter: function (param) {
                return param.name + '<br>' + (param.data.coord || '')
              },
            },
          },
          markLine: {
            symbol: ['none', 'none'],
            data: [
              [
                {
                  name: 'from lowest to highest',
                  type: 'min',
                  valueDim: 'lowest',
                  symbol: 'circle',
                  symbolSize: 10,
                  label: {
                    normal: {
                      show: false,
                    },
                    emphasis: {
                      show: false,
                    },
                  },
                },
                {
                  type: 'max',
                  valueDim: 'highest',
                  symbol: 'circle',
                  symbolSize: 10,
                  label: {
                    normal: {
                      show: false,
                    },
                    emphasis: {
                      show: false,
                    },
                  },
                },
              ],
              {
                name: 'min line on close',
                type: 'min',
                valueDim: 'close',
              },
              {
                name: 'max line on close',
                type: 'max',
                valueDim: 'close',
              },
            ],
          },
        },
        {
          name: 'MA5',
          type: 'line',
          data: calculateMA(5),
          smooth: true,
          lineStyle: {
            normal: {
              opacity: 0.5,
            },
          },
        },
        {
          name: 'MA10',
          type: 'line',
          data: calculateMA(10),
          smooth: true,
          lineStyle: {
            normal: {
              opacity: 0.5,
            },
          },
        },
        {
          name: 'MA20',
          type: 'line',
          data: calculateMA(20),
          smooth: true,
          lineStyle: {
            normal: {
              opacity: 0.5,
            },
          },
        },
        {
          name: 'MA30',
          type: 'line',
          data: calculateMA(30),
          smooth: true,
          lineStyle: {
            normal: {
              opacity: 0.5,
            },
          },
        },
      ],
    })
    // 自适应
    window.onresize = function () {
      echarts1.resize()
    }
  })
})
</script>

<style></style>
